import React from 'react';
import {useRoutes, NavLink, Navigate} from "react-router-dom";
import CounterHook from "./01_计数器实现/CounterHook";
import UseEffectDemo from "./02_useEffect/UseEffectDemo";
import './style.css'
import UseContext from "./03_useContext";
import UseReducer from "./04_useReducer";
import FakerDemo from "./fakerDemo";

const routes = [
    {path: "/", element: <Navigate to="/count" />},
    {name: '计数器',path: "/count", element: <CounterHook/>},
    {name: 'UseEffect',path: "/UseEffectDemo", element: <UseEffectDemo/>},
    {name: 'UseContext',path: "/UseContext", element: <UseContext/>},
    {name: 'UseReducer',path: "/UseReducer", element: <UseReducer/>},
    {name: 'FakerDemo',path: "/FakerDemo", element: <FakerDemo/>},
]

function App() {
    return (
        <div>
            <h1>React Hooks Demo</h1>
            <div className='nav'>
                {
                    routes.map((r, i) => (
                        r.name && <NavLink key={i} to={r.path}>{r.name}</NavLink>
                    ))
                }
            </div>
            <hr/>
            <div>
                {useRoutes(routes)}
            </div>
        </div>
    );
}

export default App;